<template>
  <div class="markdown-renderer unified-content">
    <MdPreview
      :model-value="markdownContent"
      :theme="theme"
      :preview-theme="previewTheme"
      :code-theme="codeTheme"
      :toolbars="toolbars"
      class="markdown-preview"
    />
  </div>
</template>

<script setup lang="ts">
import { computed } from "vue";
import { MdPreview } from "md-editor-v3";
import "md-editor-v3/lib/style.css";

interface Props {
  /** Markdown格式的内容 */
  content: string;
  /** 主题模式 */
  theme?: "light" | "dark";
  /** 预览主题 */
  previewTheme?:
    | "default"
    | "github"
    | "vuepress"
    | "mk-cute"
    | "smart-blue"
    | "cyanosis";
  /** 代码高亮主题 */
  codeTheme?:
    | "atom"
    | "a11y"
    | "github"
    | "gradient"
    | "kimbie"
    | "paraiso"
    | "qtcreator"
    | "stackoverflow";
}

const props = withDefaults(defineProps<Props>(), {
  content: "",
  theme: "light",
  previewTheme: "default",
  codeTheme: "atom"
});

// 计算属性
const markdownContent = computed(() => props.content || "");

// 隐藏工具栏（只显示预览内容）
const toolbars = computed(() => []);
</script>

<style scoped lang="scss">
@import url("@/styles/unified-code-styles.css");

// 移动端适配
@media screen and (width <= 767px) {
  .markdown-renderer {
    .markdown-preview {
      :deep(.md-editor-preview) {
        font-size: 14px;
        line-height: 1.6;

        h1 {
          margin: 18px 0 10px;
          font-size: 20px;
        }

        h2 {
          margin: 16px 0 8px;
          font-size: 18px;
        }

        h3 {
          margin: 14px 0 8px;
          font-size: 16px;
        }

        h4 {
          margin: 12px 0 6px;
          font-size: 15px;
        }

        h5 {
          margin: 10px 0 6px;
          font-size: 14px;
        }

        h6 {
          margin: 10px 0 6px;
          font-size: 13px;
        }

        p {
          margin: 10px 0;
          line-height: 1.6;
        }

        blockquote {
          padding: 10px;
          margin: 10px 0;
          font-size: 13px;
        }

        table {
          margin: 10px 0;
          font-size: 12px;

          th,
          td {
            padding: 6px;
          }
        }

        ul,
        ol {
          padding-left: 18px;
          margin: 10px 0;

          li {
            margin: 4px 0;
            line-height: 1.5;
          }
        }
      }
    }
  }
}

// 小屏手机适配
@media screen and (width <= 375px) {
  .markdown-renderer {
    .markdown-preview {
      :deep(.md-editor-preview) {
        font-size: 13px;

        h1 {
          font-size: 18px;
        }

        h2 {
          font-size: 16px;
        }

        h3 {
          font-size: 15px;
        }

        h4 {
          font-size: 14px;
        }

        table {
          font-size: 11px;

          th,
          td {
            padding: 4px;
          }
        }
      }
    }
  }
}

.markdown-renderer {
  width: 100%;
  min-height: 200px;

  .markdown-preview {
    // 隐藏编辑器工具栏和其他不需要的元素
    :deep(.md-editor-toolbar) {
      display: none;
    }

    // 确保预览区域样式正确
    :deep(.md-editor-preview-wrapper) {
      padding: 0;
      border: none;
      box-shadow: none;
    }

    :deep(.md-editor-preview) {
      padding: 0;
      font-size: 16px;
      line-height: 1.8;
      color: #333;
      background: transparent;

      // 文章标题样式
      h1,
      h2,
      h3,
      h4,
      h5,
      h6 {
        margin: 24px 0 16px;
        font-weight: 600;
        line-height: 1.4;
        color: #333;
      }

      h1 {
        padding-bottom: 8px;
        font-size: 24px;
        border-bottom: 2px solid #e1e4e8;
      }

      h2 {
        padding-bottom: 6px;
        font-size: 22px;
        border-bottom: 1px solid #e1e4e8;
      }

      h3 {
        font-size: 20px;
      }

      h4 {
        font-size: 18px;
      }

      h5 {
        font-size: 16px;
      }

      h6 {
        font-size: 14px;
      }

      // 段落样式
      p {
        margin: 16px 0;
        line-height: 1.8;
      }

      // 引用样式
      blockquote {
        padding: 16px;
        margin: 16px 0;
        color: #606266;
        background: #f8f9fa;
        border-left: 4px solid #409eff;
        border-radius: 4px;

        p {
          margin: 8px 0;
        }
      }

      // 使用统一的代码块样式（通过 unified-content 类应用）

      // 图片样式
      img {
        display: block;
        max-width: 100%;
        height: auto;
        margin: 16px auto;
        cursor: pointer;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgb(0 0 0 / 10%);
        transition: all 0.3s ease;

        &:hover {
          box-shadow: 0 4px 16px rgb(0 0 0 / 15%);
          transform: scale(1.02);
        }
      }

      // 表格样式
      table {
        width: 100%;
        margin: 16px 0;
        overflow: hidden;
        border-collapse: collapse;
        border: 1px solid #e1e4e8;
        border-radius: 8px;

        th,
        td {
          padding: 12px;
          text-align: left;
          border-bottom: 1px solid #e1e4e8;
        }

        th {
          font-weight: 600;
          background: #f6f8fa;
        }

        tr:nth-child(even) td {
          background: #fafbfc;
        }
      }

      // 列表样式
      ul,
      ol {
        padding-left: 24px;
        margin: 16px 0;

        li {
          margin: 8px 0;
          line-height: 1.6;
        }
      }

      // 链接样式
      a {
        color: #409eff;
        text-decoration: none;
        border-bottom: 1px solid transparent;
        transition: border-color 0.2s;

        &:hover {
          border-bottom-color: #409eff;
        }
      }

      // 分隔线样式
      hr {
        margin: 32px 0;
        border: none;
        border-top: 1px solid #e1e4e8;
      }

      // 任务列表样式
      .task-list-item {
        list-style: none;

        input[type="checkbox"] {
          margin-right: 8px;
        }
      }

      // 移动端代码块适配（通过统一样式文件处理）
    }
  }
}
</style>
